import { render } from './render';
import { initState } from './state';

render();
initState();

// 在 react vue项目中  像 accept hot 这些代码 都会通过插件 自动注入到代码中

/* 指定某个子模块的HMR */
// if (import.meta.hot) {
//   import.meta.hot.accept('./render.ts', (newModule) => {
//     newModule.render();
//   });
// }

/* 指定多个子模块的HMR */
if (import.meta.hot) {
  import.meta.hot.accept(['./render.ts', './state.ts'], (modules) => {
    const [renderModule, stateModule] = modules;

    if (renderModule) {
      renderModule.render();
    }

    if (stateModule) {
      stateModule.initState();
    }
  });
}
// vite 热更新的原理

// . 启动阶段：ESM 的预构建与加载‌
// ‌步骤 1‌：Vite 启动开发服务器时，会使用 ‌esbuild‌ 对依赖（如 node_modules）进行预构建，转换为 ESM 格式并缓存。
// ‌步骤 2‌：浏览器通过 <script type="module"> 加载入口文件（如 main.js），触发原生 ESM 请求链，按需加载模块。
// ‌2. 文件变更监听‌
// ‌步骤 3‌：Vite 使用 ‌chokidar‌ 监听项目文件的变化（如 .js、.vue、.css 等）。
// ‌触发条件‌：当用户修改并保存文件时，Vite 检测到文件变更。
// ‌3. 计算变更影响范围‌
// ‌步骤 4‌：Vite 根据变更的文件路径，快速分析受影响的模块依赖链。
// ‌关键机制‌：通过预构建的模块依赖图（由 es-module-lexer 解析生成），确定需要更新的模块。
// ‌示例‌：修改 ComponentA.vue 时，Vite 会找到所有依赖 ComponentA.vue 的模块（如父组件、路由等）。
// ‌4. 推送更新消息‌
// ‌步骤 5‌：Vite 通过 ‌WebSocket‌ 向浏览器发送 HMR 更新通知，消息格式为：
// json
// Copy Code
// {
//   "type": "update",
//   "updates": [
//     {
//       "path": "/src/ComponentA.vue", // 变更文件路径
//       "timestamp": 1620000000000     // 时间戳（避免重复更新）
//     }
//   ]
// }
// ‌5. 浏览器动态加载新模块‌
// ‌步骤 6‌：浏览器接收到更新消息后，对变更的模块发起新的 ESM 请求（如 ComponentA.vue?t=1620000000000）。
// ‌缓存失效‌：通过 URL 追加时间戳参数（如 ?t=1620000000000），绕过浏览器缓存，强制重新加载模块。
// ‌步骤 7‌：新模块加载完成后，替换旧模块的代码。
// ‌6. 应用热替换（HMR API）‌
// ‌步骤 8‌：如果模块定义了 HMR 处理逻辑（如 Vue/React 组件），Vite 会触发自定义的 hot.accept 回调，执行局部更新而非刷新页面。
// ‌Vue 组件示例‌：
// js
// Copy Code
// // ComponentA.vue
// if (import.meta.hot) {
//   import.meta.hot.accept((newModule) => {
//     // 替换组件定义，保留状态（如 data、props）
//     newModule.updateComponent();
//   });
// }
// ‌CSS 文件‌：Vite 自动替换 <style> 标签，无需刷新页面。
// ‌7. 异常回退‌
// ‌步骤 9‌：如果 HMR 更新失败（如模块未定义处理逻辑），Vite 会自动回退到 ‌整页刷新‌（Full Reload），确保应用状态正确。
